<template>
  <view class="rateCardWrapper" v-if="!isConsultant">
    <view class="rateCardTitle">
      <view class="rateCardTitleLine"></view>
      <view class="rateCardTitleText"
        >您对{{ share.rateInfo.consultantName || "该顾问" }}的服务满意吗</view
      >
      <view class="rateCardTitleLine"></view>
    </view>
    <view class="rateCardContent">
      <view class="rateTitleRow">
        <view class="rateTitleCol"></view>
        <view class="rateTitleCol">很不满</view>
        <view class="rateTitleCol">不满</view>
        <view class="rateTitleCol">一般</view>
        <view class="rateTitleCol">满意</view>
        <view class="rateTitleCol">很满意</view>
      </view>
      <view
        class="rateContentRow"
        v-for="(item, index) in rateList"
        :key="item.rateType"
      >
        <view class="rateContentCol">{{ item.rateName }}</view>
        <view
          class="rateContentCol"
          v-for="(iconItem, iconIndex) in item.iconList"
          :key="index + iconIndex"
        >
          <img
            :src="iconItem"
            class="rateContentIcon"
            @click="handleRateIconClick(item, index, iconItem, iconIndex)"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  addConsultantRateDetail,
  getConsultantRate,
} from "@/api/modules/career.js";
export default {
  name: "zhituRateCard",
  props: {
    //share里面包含了很多信息
    share: {
      type: Object,
      default: () => {},
    },
    isConsultant: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      grayIconList: [
        this.$imgBase + "careerPath/rateOneGray.png",
        this.$imgBase + "careerPath/rateTwoGray.png",
        this.$imgBase + "careerPath/rateThreeGray.png",
        this.$imgBase + "careerPath/rateFourGray.png",
        this.$imgBase + "careerPath/rateFiveGray.png",
      ],
      colorIconList: [
        this.$imgBase + "careerPath/rateOneColor.png",
        this.$imgBase + "careerPath/rateTwoColor.png",
        this.$imgBase + "careerPath/rateThreeColor.png",
        this.$imgBase + "careerPath/rateFourColor.png",
        this.$imgBase + "careerPath/rateFiveColor.png",
      ],
      rateList: [],
      isRated: false,
    };
  },
  created() {
    if (this.share.rateList) {
      console.log("this.share", this.share.rateList);

      this.rateList = this.share.rateList;
      this.rateList.forEach((item, index) => {
        this.$set(item, "iconList", [...this.grayIconList]);
      });
    }
    this.checkCardClickable();
  },
  watch: {
    share: {
      handler(val) {
        console.log("share", val);
      },
      deep: true,
    },
  },
  methods: {
    //点击图标处理
    handleRateIconClick(item, index, iconItem, iconIndex) {
      if (this.isConsultant) {
        //顾问不能评价
        uni.showToast({
          title: "顾问不能自评！",
          icon: "none",
          duration: 1000,
        });
        return;
      }
      // if (this.isRated) {
      //   uni.showToast({
      //     title: "您已经评价过了！",
      //     icon: "none",
      //   });
      //   return;
      // }
      //处理变色，存储分数
      item.iconList.forEach((_item, _index) => {
        this.$set(item.iconList, _index, this.grayIconList[_index]);
      });
      this.$set(item.iconList, iconIndex, this.colorIconList[iconIndex]);
      item.rateScore = iconIndex + 1;
      console.log("handleRateIconClick", item);
      //检查分数是否都填了，如果都填了就提交分数
      this.rateList.find((_item) => {
        //后端返回的有可能为0
        return _item.rateScore == undefined || _item.rateScore <= 0;
      })
        ? ""
        : this.reqAddConsultantRateDetail();
    },
    //请求进行评分
    reqAddConsultantRateDetail() {
      addConsultantRateDetail({
        rateList: this.rateList,
        rateId: this.share.rateId,
      }).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "评价成功",
            icon: "none",
            duration: 1000,
          });
          this.isRated = true;
          this.$emit("sendSingleTextMsg", "我已完成评价");
        } else {
          uni.showToast({
            title: res.status_desc || "服务器开小差了",
            icon: "none",
            duration: 1000,
          });
        }
      });
    },
    //用rateId检查此卡片是否已经评分过
    checkCardClickable() {
      const { consultantId, personId, rateId } = this.share;
      const params = {
        consultantId,
        personId,
        rateId,
      };
      getConsultantRate(params)
        .then((res) => {
          if (res.code == 200) {
            if (res.data.rateScore) {
              //已经评分过 所以禁用
              this.isRated = true;
              if (res.data.rateList && res.data.rateList.length) {
                this.rateList = res.data.rateList;
              }
              this.handleIconEcho();
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //回显已经选过分数的icon
    handleIconEcho() {
      this.rateList.forEach((item, index) => {
        item.iconList = this.grayIconList.map((_item, _index) => {
          if (_index == item.rateScore - 1) {
            return this.colorIconList[_index];
          } else {
            return _item;
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.rateCardWrapper {
  display: flex;
  flex-direction: column;
  .rateCardTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    .rateCardTitleLine {
      // width: 160rpx;
      flex: 1;
      height: 2rpx;
      background: #d7d7d7;
    }
    .rateCardTitleText {
      height: 46rpx;
      font-size: 30rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 46rpx;
      margin: 0 38rpx;
    }
  }
  .rateCardContent {
    display: flex;
    flex-direction: column;
    .rateTitleRow {
      display: flex;
      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 46rpx;
      text-align: center;
      margin-bottom: 36rpx;
      .rateTitleCol {
        width: calc(100% / 24 * 4);

        &:nth-of-type(1) {
          width: calc(100% / 24 * 5);
        }
      }
    }
    .rateContentRow {
      display: flex;
      font-size: 30rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 46rpx;
      text-align: center;
      margin-bottom: 56rpx;
      .rateContentCol {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(100% / 24 * 4);
        .rateContentIcon {
          width: 48rpx;
          height: 48rpx;
        }
        &:nth-of-type(1) {
          width: calc(100% / 24 * 5);
        }
      }
    }
  }
}
</style>
